<template>
  <div class="bg-w">
    <div class="container">
      <!-- <build-el-bread></build-el-bread> -->
      <build-el-h1 name="参选人展示.png"></build-el-h1>
      <div class="w100 flex-row vote" v-loading="Boolean(tableData === null)">
        <build-el-list-people
          v-for="item in tableData"
          :key="item.artistId"
          :artistId="item.worksId"
          :titleImg="item._listImage"
          :picture="item._picture"
          :author="item.author"
          :companyName="item.companyName"
          :artistPosition="item.artistPosition"
          :ticketNumber="item.number"
          :artistName="item.worksTitle"
        ></build-el-list-people>
      </div>
      <div style="text-align:center;">
        <el-pagination
          v-margin-top="'30px'"
          background
          :page-size="pageSize"
          :current-page="pageNow"
          layout="prev, pager, next"
          @current-change="changePage"
          :total="total"
        ></el-pagination>
      </div>
      <div v-margin-top="'30px'"></div>
    </div>
  </div>
</template>
<script>
import buildElH1 from '@/components/build-el-h1'
import buildElBread from '@/components/build-el-bread'
import buildElListPeople from '@/components/build-el-list-people'

export default {
  components: {
    buildElBread,
    buildElListPeople,
    buildElH1,
  },
  data() {
    return {
      tableData: null,
      total: 0,
      pageSize: 8,
      pageNow: 1,
    }
  },
  async created() {
    await this.init(1)
  },
  methods: {
    async init(page) {
      this.tableData = []
      let tableData = await this.api.findNewVoteArtistList(page, this.pageSize)
      this.total = tableData.total
      this.tableData = tableData.list
      console.log('tableData', this.tableData)
    },
    changePage(e) {
      this.pageNow = e
      this.init(e)
    },
  },
}
</script>
<style lang="less" scoped>
.vote {
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
